<template>
  <div>
    <div class="title space-between titleBack">
      <span>产品档案详情</span>
      <el-button type="text" @click="backList">返回</el-button>
    </div>
    <div class="edit-container">
      <div style="" class="containOne">
        <div class="title">
          <p>基本信息</p>
        </div>
        <div style="padding:10px">
          <el-row v-if="detailData">
            <el-col class="paddingLeft" :span="6">
              <img style="width:100%"  :src="detailData.productMainImage">
            </el-col>
            <el-col class="paddingLeft" :span="8">
              <h1 style="font-size: 22px">{{detailData.productName}}</h1>
              <p><span>行业/品类:</span><span>{{detailData.category}}</span></p>
              <p><span>编号:</span><span>{{detailData.productId}}</span></p>
              <p><span>型号:</span><span>{{detailData.productCode}}</span></p>
              <p><span>指导价格:</span><span>{{detailData.guidePrice}}</span></p>
            </el-col>
            <el-col class="paddingLeft" :span="10">
              <div class="itemTitle">
                <span></span>
                <div class="pickerOption">
                  <el-button size="small" type="primary" v-if="!editStatus" @click="editstatusFn">编辑</el-button>
                  <el-button size="small" type="primary" v-else @click="saveeditStatus">保存</el-button>
                </div>
              </div>
              <div>
                <p>
                  <span>上市状态:</span>
                  <el-radio v-model="radio" label="1" :disabled="!editStatus" ><span style="color:#4CAF50;">上市</span></el-radio>
                  <el-radio v-model="radio" label="0" :disabled="!editStatus" ><span style="color:#b71c1c;">下市</span></el-radio>
                </p>
                <p>
                  <span>产品类型:</span>
                  <el-radio-group v-model="productType">
                    <el-radio  label="引流款" :disabled="!editStatus"></el-radio >
                    <el-radio  label="利润款" :disabled="!editStatus"></el-radio >
                    <el-radio  label="标杆款" :disabled="!editStatus"></el-radio >
                    <el-radio  label="辅助款" :disabled="!editStatus"></el-radio >
                    <el-radio  label="新品款" :disabled="!editStatus"></el-radio >
                  </el-radio-group>
                </p>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div style="" class="containOne">
        <div class="title">
          <p>目标人群</p>
        </div>
        <div style="padding:20px">
          <div class="space-between" style="display: flex;align-items: center;margin-bottom: 12px;">
            <div style="height: 100%;display: flex;align-items: center;font-size: 16px;">地理区域:</div>
            <div class="pickerOption">
              <el-button size="small" v-if="editPeople" type="primary" @click="editTarget('edit')">编辑</el-button>
              <el-button size="small" v-else type="primary" @click="editTarget('save')">保存</el-button>
            </div>
          </div>
          <p v-if="editPeople" v-for="(item,indexPo) in targetPopulationVegion" :key="indexPo">{{item.vegion}}
            <span v-for="(items,indexinfo) in item.province" :key="indexinfo">{{items}},</span>
          </p>
          <div v-if="!editPeople">
            <el-form size="mini">
              <el-form-item :label="area.region" v-for="(area,index) in allArea" :key="index">
                <el-checkbox-group @change="multiArea" v-model="checkedCities1">
                  <el-checkbox v-for="city in area.provinceList" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>
          <div class="descTitle">社会属性:</div>
          <div class="space-between " style="display: flex" v-if="editPeople">
            <span>年龄:{{targetPopulationpepole.age}}岁</span>
            <span>教育程度:{{targetPopulationpepole.education}}</span>
            <span>收入:{{targetPopulationpepole.income}}</span>
            <span>性别:{{targetPopulationpepole.sex}}</span>
          </div>
          <div v-if="!editPeople">
            <el-form size="mini">
              <el-form-item label="年龄：" class="ageSlider">
                <el-slider range v-model="ageRangeSet"></el-slider>
              </el-form-item>
              <el-form-item label="收入：">
                <el-checkbox-group
                  v-model="checkedCities2">
                  <el-checkbox v-for="(city,index) in cities" :label="city" :key="index">{{city}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="性别：">
                <el-select v-model="sexValue" placeholder="请选择">
                  <el-option label="全部" value="全部">
                  </el-option>
                  <el-option label="男" value="男">
                  </el-option>
                  <el-option label="女" value="女">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="教育：">
                <el-checkbox-group v-model="checkedCities3">
                  <el-checkbox v-for="(city,index) in education" :label="city" :key="index">{{city}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>
          <div style="padding:20px">
            <el-row :gutter="20">
              <el-col :span="8">
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div style="margin:10px 0" class="containTwo">
        <el-row :gutter="24" style="margin: 0px !important;">
          <el-col :span="12">
            <div class="title" style="padding: 7px 0px;">
              <p>产品卖点</p>
            </div>
            <div class="containOne" style="padding:5px">
              <div class="itemTitle">
                <span></span>
                <div class="pickerOption">
                  <el-button size="small" type="primary" @click="editPoint" v-if="editPointButton">编辑</el-button>
                  <el-button size="small" type="primary" @click="editPointsave" v-else>保存</el-button>
                </div>
              </div>
              <div v-if="!editPointButton">
                <p v-for="(item,index) in salePoint" :key="index">
                  <el-input size="mini" style="width:200px;margin:1px" maxLength="25" v-model="item.sellingPoint"></el-input >
                  <el-button size="mini" @click="handleRemoveold(index,item.id)" type="primary">删除</el-button>
                </p>
                <el-button type="dashed" long @click="handleAdd" icon="el-icon-plus" >添加</el-button>
              </div>
              <div v-else style="padding:20px">
                <el-alert v-for="(item,index) in salePoint" :key="index"
                          v-if="index%3 === 0" :title="item.sellingPoint"
                          type="success" style="margin:5px;width:30%;word-break: break-all" :closable="false">
                </el-alert>
                <el-alert v-else-if="index%3 === 1"
                          :title="item.sellingPoint" type="error"
                          style="margin:5px;width:30%;word-break: break-all" :closable="false">
                </el-alert>
                <el-alert v-else :title="item.sellingPoint"
                          type="warning" style="margin:5px;width:30%;word-break: break-all" :closable="false">
                </el-alert>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="title" style="padding: 7px 0px;">
              <p>销售话术</p>
            </div>
            <div class="containOne" style="padding:5px">
              <div class="itemTitle">
                <span></span>
                <div class="pickerOption">
                  <el-button size="small" v-if="this.editsellingWords" type="primary" @click="saveeditsellingWords">编辑</el-button>
                  <el-button size="small" v-else type="primary" @click="editsellingWord">保存</el-button>
                </div>
              </div>
              <el-input type="textarea" :rows="10"
                        :disabled="editsellingWords"
                        placeholder="请输入内容" v-model="sellingWords">
              </el-input>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="" class="containOne">
        <div class="title">
          <p>产品规格</p>
        </div>
        <div style="padding:20px;display:inline-block;vertical-align: top;" v-for="(item,index) in productSkuList" :key="index">
          <div class="modeInfo" >
            <div class="img">
              <img style="width:100%" :src="item.imageUrl">
            </div>
            <div style="padding:5px">
              <p v-for="(items,indexs) in item.skuAttribute" :key="indexs">{{items.attributeName}}:{{items.attributeValue}}</p>
              <p>价格:{{item.skuPrice}}</p>
            </div>
          </div>
        </div>
      </div>
      <specificationCompent v-if="productCode" :param="productCode"></specificationCompent>
    </div>
  </div>
</template>

<script>
  import * as opreate from 'api/getData'
  import specificationCompent from '../productCapabilityAnalysis/detailPanel/specificationCompent'
  import { mapState } from 'vuex'
  const cityOptions = ['5万以下', '5-10万', '10-20万', '20-50万','50-100万','100万以上'];

  export default {
    name: 'productFileMangementDetail',
    data () {
      return {
        sexValue:'',
        educationValue:'',
        education:['小学', '初中', '高中', '大学','硕士','博士'],
        editPeople:true,
        newproduct:false,
        index: 1,
        form:{
          name:'',
          productCode:'',
          category:''
        },
        ageRangeSet:[10,60],
        getCategorylevel:['引流款','利润款','标杆款','辅助款','新品款'],
        formDynamic:[],
        minPrice: '1',
        maxPrice: '10000',
        editPointButton: true,
        chooseMode: '',
        chooseType:'',
        checkList: '',
        editsellingWords: true,
        isSale:'',
        totalRecord: '',
        checkboxGroup1: ['上海'],
        cities: cityOptions,
        checkedCities1:[],
        checkedCities2:[],
        checkedCities3:[],
        allArea:[],
        radio: '1',
        dialogVisible: false,
        page: 1,
        tableData: [],
        detailData:[],
        salePoint: [],
        productSkuList: [],
        productType: '',
        getCategoryProductListData:[],
        productCode: undefined,
        sellingWords: '',
        editStatus: false,
        productSpecificationParameter: [],
        targetPopulationVegion: [],
        targetPopulationpepole:[],
        cid:'',
        pid:'',
      };
    },
   mounted(){
     this.productCode = this.$route.params.code
     this.toUrl(this.$route.params.code)
     this.getEditArea()
   },
   computed:{
     ...mapState(["user"])
   },
   components:{
     specificationCompent
   },
    methods:{
      backList(){
        if(this.editPeople && this.editPointButton && this.editsellingWords && !this.editStatus){
          this.$router.back()
        }else {
          this.$confirm('当前有未保存的修改，确认返回？',{
            confirmButtonText: '不保存并返回',
            cancelButtonText: '去保存'
          }).then(_ => {
              this.$router.back()
          }).catch(_ => {});
        }
      },
      toUrl(productCode){
        opreate.getProdArchive({ productCode }).then(res => {
          let { productSellingPoint, productSkuList, isSale, productType, productCode,
            sellingWords, productSpecificationParameter, targetPopulation } = res.data || {}
          this.dialogVisible = true
          this.detailData = res.data
          this.salePoint = productSellingPoint
          this.productSkuList = productSkuList
          this.isSale = isSale
          this.productType = productType
          this.productCode= productCode
          this.sellingWords = sellingWords
          this.productSpecificationParameter = productSpecificationParameter
          this.targetPopulationVegion = targetPopulation.targetPopulationVegion
          this.targetPopulationVegion.map(item => {
            this.checkedCities1.push(...item.province)
          })
          this.targetPopulationpepole = targetPopulation
          let ageRange = targetPopulation.age ? targetPopulation.age.split('-') : []
          let [ startAge = 10, endAge = 60 ] = ageRange
          this.ageRangeSet = [ isNaN(startAge)? 10 : startAge, isNaN(endAge)? 60 : endAge ]
          this.sexValue = targetPopulation.sex && (targetPopulation.sex == '男,女'? '全部' : targetPopulation.sex )
          this.checkedCities3 = targetPopulation.education ? targetPopulation.education.split(',') : []
          this.checkedCities2 = targetPopulation.income ? targetPopulation.income.split(',') : []
        })
      },
      editTarget(newVal){
        this.editPeople = !this.editPeople
        let param = {
          province:this.checkedCities1.join(','),
          income:this.checkedCities2.join(','),
          sex:this.sexValue == '全部' ? '男,女': this.sexValue,
          education:this.checkedCities3.join(','),
          age:this.ageRangeSet.join('-'),
          productCode:this.productCode,
          phoneNumber:this.user.phone
        }
        if(this.editPeople == true){
          opreate.editTargetPeople(param).then(res => {
            this.toUrl(this.productCode)
          })
        }
      },
      multiArea(newVal){},
      handleAdd() {
        this.salePoint.push({ sellingPoint: '', staus:true });
      },
      getEditArea(){
        opreate.getPeopleArea().then(res => { this.allArea = res.data })
      },
      handleRemoveold(index,id) {
        this.salePoint.splice(index, 1);
        id && this.formDynamic.push(id)
      },
      editPointsave() {
        let param = {
          listSellPoint:this.salePoint,
          productCode:this.$route.params.code,
          deleteSellpointList:this.formDynamic
        }
        if(this.salePoint.every((item)=> item.sellingPoint.trim() != '')){
          opreate.sellPointUpdate(param).then(res => {
            this.editPointButton = true
            if(res.data == 'success'){
              this.$message.success('保存成功');
              this.toUrl(this.productCode)
              this.formDynamic = []
            }else {
              this.$message.error('操作失败');
            }
          })
        }else {
          this.$message.error('产品卖点不能为空，请保存前先处理')
        }
      },
      editPoint(){
        this.editPointButton = false
      },
      editstatusFn() {
        this.editStatus = true
      },
      saveeditStatus() {
        opreate.updateProdBasicState({
          productCode: this.productCode,
          isSale: this.radio,
          phoneNumber: this.user.phone,
          productType: this.productType
        }).then(res => {
          this.$message.success('操作成功');
          this.editStatus = false
        })
      },
      editsellingWord( ) {
        opreate.updateSaleWord({
          productCode: this.productCode,
          sellingWords: this.sellingWords,
          phoneNumber: this.user.phone
        }).then(res => {
          if(res.data == '1'){
            this.editsellingWords = true
            this.$message.success('操作成功');
          }else {
            this.$message.error('操作失败');
          }
        })
      },
      saveeditsellingWords () {
        this.editsellingWords = false
      }
    }
  }
</script>

<style scoped>
  .saleMarketRight .el-radio-group label,.el-form-item label{
    margin-left: 20px !important;
  }
  .titleBack{
    display: flex;
    height: 40px;
    align-items: center;
  }
  .titleBack p:last-child{
    cursor: pointer;
  }
  .title{
    font-weight: bold;
  }
  .img{
    width: 180px;
    background: #e8eef4
  }
  .modeInfo {
    width: 180px;
    /* background:#e2e2e2 */
  }
  .pickerOption {
    /* display: flex; */
    align-items: center;
  }
  .titleInfo{
    padding-left:10px;
    border: 1px solid #e2e2e2
  }
  .itemTitle {
    /* background-color: #E8EEF4; */
    height: 40px;
    padding: 0px 12px;
    line-height: 40px;
    display: -webkit-box;
    justify-content: space-between;
  }
  .org-filter {
    width: 150px;
  }
  .title{
    padding: 7px 10px;
    background:#e8eef4;

  }
  .containOne{
    background: #ffffff;
    padding-bottom: 10px;
    border: 1px solid #e2e2e2;
    box-shadow: 0px 3px 12px 1px #e2e2e2;
  }
  .containTwo {
    background: #e7eaed;
    padding-bottom: 10px;
    border: 1px solid #e2e2e2;
    box-shadow: 0px 3px 12px 1px #e2e2e2;
  }
   .containOne textarea {
     resize:none !important;
  }
   .paddingLeft+ .paddingLeft{
     padding-left: 12px;
   }
  .itemTitle {
    height: 40px;
    padding: 0px 12px;
    line-height: 40px;
    display: -webkit-box;
    justify-content: space-between;
  }
  .borTop{
    border-top: 0px;
    line-height: 32px
  }
  .descTitle{
    margin-bottom: 20px;
    font-size: 16px;
  }
</style>


